import React, {useState} from 'react';
import {Button, Form, Input, message, Modal} from 'antd';
import {useModel} from "umi";
import {IS_LOGIN_KEY, setIsLogin} from "@/store/store";

const Login = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const { isLogin, login, logout } = useModel('userModel');
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        // 这里可以添加你的登录逻辑
        console.log('Login logic here');
        setIsModalVisible(false);

    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onFinish = (values) => {
        // 处理表单提交
        console.log('Received values of form: ', values);
        message.success('登录成功！');
        login();
        handleOk();
    };

    return (
        <>
            <Button type="primary" onClick={showModal}>
                登录
            </Button>
            <Modal title="登录" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form onFinish={onFinish}>
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password placeholder="密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

export default Login;